<template>
    <div class="infimOrd">
        <!-- 确认订单 -->
        <van-nav-bar title="确认订单" left-arrow @click-left="onClickLeft" />
        <van-tabs v-model:active="active">
            <van-tab name="1">
                <template #title>
                    <div class="iconTit">
                        <van-icon name="logistics" />
                        <span>邮寄</span>
                    </div>

                </template>
                <div class="con">
                    <div class="address address2">
                        <div class="titInfo">
                            <span>{{ address2.address }}</span>
                        </div>
                        <div class="tit tit2">
                            <van-cell :title="`${address2.province}${address2.city}${address2.district}`" is-link />
                            <!-- <span>上海浦东新区北蔡镇</span>
                            <span><van-icon name="arrow" /></span> -->
                        </div>
                        <div class="prson">
                            {{ address2.realname }}
                            <span>{{ address2.mobile }}</span>
                        </div>
                    </div>
                    <div class="crad" v-for="item in data.list">
                        <van-card :num="item.num" :price="item.price" :desc="'规格: ' + item.parameters"
                            :title="item.product_name" :thumb="item.cover_ico" />
                    </div>
                    <!-- <div class="crad">
                        <van-card num="2" price="2.00" desc="规格:xxx" title="百草味零食大礼包卤味礼盒送礼物猪肉办公室夜宵食品"
                            thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" />
                    </div> -->
                    <van-submit-bar :price="data.total * 100"   button-text="提交订单" @submit="onSubmit" />
                </div>
            </van-tab>
            <van-tab name="0">
                <template #title>
                    <div class="iconTit"><van-icon name="shop-collect-o" />
                        <span>自取 </span>
                    </div>
                </template>
                <div class="con">
                    <div class="address">
                        <div class="tit iconTit">
                            <span>{{ address.address }}</span>
                            <van-icon name="arrow" />
                        </div>
                        <div class="titInfo">
                            <!-- <span><van-icon name="location-o" /></span>
                            <span>新陈路280弄莲鼎苑11号302</span> -->
                        </div>
                    </div>
                    <van-cell-group>
                        <van-cell title="联系人" :value="address.owner" />
                        <van-cell title="联系电话" :value="address.mobile" />
                    </van-cell-group>
                    <div class="crad" v-for="item in data.list">
                        <van-card :num="item.num" :price="item.price" :desc="'规格: ' + item.parameters"
                            :title="item.product_name" :thumb="item.cover_ico" />
                    </div>
                    <van-submit-bar :price="data.total * 100" button-text="提交订单" @submit="onSubmit" />
                </div>
            </van-tab>

        </van-tabs>
    </div>
</template>
<script lang="ts">
export default {
    name: "qrdd"
}
</script>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from "vue-router";
import { Toast } from 'vant';
import { createorder, getOrder, getStoreInfo, getAddress } from '../../../api/index';
const active = ref(0);
const route: any = useRoute();
const router = useRouter();
const data = ref("")
const address = ref("")
const address2 = ref("")
let formData = new FormData();
// 定义onClickLeft方法
const onClickLeft = () => history.back();
const onSubmit = () => {
    formData = new FormData();
    formData.append("is_trans", active.value)
    formData.append("tag", route.params.id)
    formData.append("message", "备注")
    createorder(formData).then(res => {
        console.log(res)
        if (res.code == 1) {
            // Toast(res.msg + "正在为您跳转")
            let timer = setTimeout(() => {
                router.push({ path: "/mine/orderls", state: { active_id: 0 } });
                clearTimeout(timer);
            }, 2000);
        } else {
            Toast(res.msg)
        }
    })
    formData = new FormData();
};
onMounted(() => {
    formData = new FormData();
    getAddress(formData).then(res => {
        console.log(res.data)
        if (res.code == 1) {
            if (res.data.length >= 1) {
                address2.value = res.data[0]
            } else {
                Toast("请添加默认收货地址")
                // router.push("/mine/addressls")
            }
        } else {
            Toast(res.msg)
        }
    })
    formData = new FormData();
    formData.append("tag", history.state.id)
    getOrder(formData).then(res => {
        console.log(res)
        if (res.code == 1) {
            data.value = res.data
        } else {
            Toast(res.msg)
        }
    })
    formData = new FormData();

    getStoreInfo().then(res => {
        if (res.code == 1) {
            console.log(res.data)
            address.value = res.data
        } else {
            Toast(res.msg)
        }
    })
})
</script>

<style lang="less" scoped>
@import url(../../../style/common.css);

.infimOrd {
    background: #F6F7F9;
    width: 100%;
    height: 100vh;
}

.van-nav-bar {
    height: 52px;
}

.van-tabs {
    padding: 0 15px;
    margin-top: 18px;

}

.con {
    .address {
        padding: 0 12px;
        height: 70px;
        background: #FFFFFF;
        text-align: left;
        display: flex;
        // align-items: center;
        flex-direction: column;
        justify-content: center;

        .tit {
            font-size: 17px;
            color: #333333;
        }

        .tit2 {
            font-size: 14px;
            color: #232323;
            margin: 10px 0;

            .van-cell {
                padding: 0;
            }
        }

        .titInfo {
            font-size: 11px;
            color: #707070;

            span {
                color: #333333;
            }
        }

        .prson {
            font-size: 12px;
            color: #333333;
        }
    }

    .address2 {
        height: 100px;

        .titInfo {
            font-size: 12px;
            color: #333333;
        }
    }

    .van-cell-group {
        padding: 0 12px;
        text-align: left;

        .van-cell {
            display: flex;
            align-items: center;
            padding: 0;
            height: 50px;
        }
    }

}

.crad {
    margin-top: 13px;
    height: 159px;
    background: #FFFFFF;
    border-radius: 8px 8px 8px 8px;

    :deep(.van-card__title) {
        text-align: left;
        font-size: 14px;
        color: #232323;
    }

    :deep(.van-card__desc) {
        text-align: left;
        font-size: 12px;
        color: #666666
    }

    :deep(.van-card__num) {
        position: absolute;
        top: 0;
        right: 0;
    }

    :deep(.van-card__price) {
        position: absolute;
        bottom: 0;
        right: 0;
        font-size: 14px;
        color: #E1222A;
    }
}

:deep(.iconTit) {
    display: flex;
    align-items: center;

    .van-icon {
        margin-right: 7px;
    }
}

:deep(.van-nav-bar__left .van-badge__wrapper) {
    color: #272635;
}
</style>
